﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>意见反馈</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<style>
    .weui-textarea {
        font-family: -webkit-body;
    }

    .weui-b {
        margin-bottom: 75px;
    }

    .weui-btn {
        width: 90%;
        margin-top: 1.2em;
        background-color: #ff8427;
        color: #ffffff;
    }
</style>

<body style="max-width: 640px; background-color: #F0EFF5;">
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
            <div class="weui-cell__bd">
                <select class="weui-select" name="select1">
                    <option selected="" value="1">请选择问题类型</option>
                    <option value="2">QQ号</option>
                    <option value="3">Email</option>
                </select>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">手机号码</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="填写后方便我们与您联系" />
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd weui-b">
                <label class="weui-label">建议描述</label>
            </div>
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" onkeyup="onkey()" id="suggest" placeholder="对我们的产品或服务，你还有什么建议吗？你希望我们为你解决什么问题？请告诉我们..." rows="3"></textarea>
                <div class="weui-textarea-counter">
                    <span id="count">0</span>/500</div>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd weui-b">
                <label class="weui-label">上传图片</label>
            </div>
            <div class="weui-cell__bd">
                <div class="weui-uploader__input-box">
                    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" />
                </div>
                <div style="color: #7c7c7c; font-size: 14px; margin-left: 100px; margin-top: 10px;">
                    最多4张
                    <br> 选填，提供问题截图
                    <br> 每张10M以内
                </div>
            </div>
        </div>
    </div>
    <div type="button" class="weui-btn">提交</div>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/base.js"></script>
    <script>
        $(function () {
            $('.weui-btn').click(function () {
                var uid = getQueryString("uid");
                var type = $('.weui-select option:selected').val();
                var photo = $('.weui-input').val();
                var mes = $('.weui-textarea').val();
                ajaxPost(siteApiList.AddFeedback, "uid=" + uid + "&content=" + mes + "&typeId=" + type + "&mobile=" + photo, function (data) {
                    console.log(data);
                    if (!isJsonSuccess(data))
                        return;
                    if (data.Data ==true) {
                        toast.show("添加成功!");
                    }

                })

            });
        })
        $('.weui-input').blur(function () {
            var phoone = $('.weui-input').val();
            if (!phoone.match(/0?(13|14|15|18)[0-9]{9}/)) {
                Alert("手机格式不对，请重新输入");
                $(".mobile").focus();
            }

        })
        function onkey() {
            var textcontent = ($('#suggest').val()).length;
            $('#count').text(textcontent);
            if (textcontent.length > 500) {
                Alert("字数超过范围。");
            }
        }
    </script>
</body>
</html>